<style lang="less">
@import "./message.less";
</style>

<template>
  <div class="message-main-con">
    <div class="message-mainlist-con">
      <div>
        <Button
          @click="setCurrentMesType('unread')"
          size="large"
          long
          type="text"
          ><transition name="mes-current-type-btn"
            ><Icon
              v-show="currentMessageType === 'unread'"
              type="checkmark"
            ></Icon></transition
          ><span class="mes-type-btn-text">未读消息</span
          ><Badge
            class="message-count-badge-outer"
            class-name="message-count-badge"
            :count="unreadCount"
          ></Badge
        ></Button>
      </div>
      <div>
        <Button
          @click="setCurrentMesType('hasread')"
          size="large"
          long
          type="text"
          ><transition name="mes-current-type-btn"
            ><Icon
              v-show="currentMessageType === 'hasread'"
              type="checkmark"
            ></Icon></transition
          ><span class="mes-type-btn-text">已读消息</span
          ><Badge
            class="message-count-badge-outer"
            class-name="message-count-badge"
            :count="hasreadCount"
          ></Badge
        ></Button>
      </div>
      <div>
        <Button
          @click="setCurrentMesType('recyclebin')"
          size="large"
          long
          type="text"
          ><transition name="mes-current-type-btn"
            ><Icon
              v-show="currentMessageType === 'recyclebin'"
              type="checkmark"
            ></Icon></transition
          ><span class="mes-type-btn-text">回收站</span
          ><Badge
            class="message-count-badge-outer"
            class-name="message-count-badge"
            :count="recyclebinCount"
          ></Badge
        ></Button>
      </div>
    </div>
    <div class="message-content-con">
      <transition name="view-message">
        <div v-if="showMesTitleList" class="message-title-list-con">
          <Table
            ref="messageList"
            :columns="mesTitleColumns"
            :data="currentMesList"
            :no-data-text="noDataText"
          ></Table>
        </div>
      </transition>
      <transition name="back-message-list">
        <div v-if="!showMesTitleList" class="message-view-content-con">
          <div class="message-content-top-bar">
            <span class="mes-back-btn-con"
              ><Button type="text" @click="backMesTitleList"
                ><Icon type="chevron-left"></Icon>&nbsp;&nbsp;返回</Button
              ></span
            >
            <h3 class="mes-title">{{ mes.title }}</h3>
          </div>
          <p class="mes-time-con">
            <Icon type="android-time"></Icon>&nbsp;&nbsp;{{ mes.time }}
          </p>
          <div class="message-content-body">
            <p class="message-content">{{ mes.content }}</p>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "message_index",
  data() {
    const markAsreadBtn = (h, params) => {
      return h(
        "Button",
        {
          props: {
            size: "small",
          },
          on: {
            click: () => {
              this.hasreadMesList.unshift(
                this.currentMesList.splice(params.index, 1)[0]
              );
              this.$store.commit("setMessageCount", this.unreadMesList.length);
            },
          },
        },
        "标为已读"
      );
    };
    const deleteMesBtn = (h, params) => {
      return h(
        "Button",
        {
          props: {
            size: "small",
            type: "error",
          },
          on: {
            click: () => {
              this.recyclebinList.unshift(
                this.hasreadMesList.splice(params.index, 1)[0]
              );
            },
          },
        },
        "删除"
      );
    };
    const restoreBtn = (h, params) => {
      return h(
        "Button",
        {
          props: {
            size: "small",
          },
          on: {
            click: () => {
              this.hasreadMesList.unshift(
                this.recyclebinList.splice(params.index, 1)[0]
              );
            },
          },
        },
        "还原"
      );
    };
    return {
      currentMesList: [],
      unreadMesList: [],
      hasreadMesList: [],
      recyclebinList: [],
      currentMessageType: "unread",
      showMesTitleList: true,
      unreadCount: 0,
      hasreadCount: 0,
      recyclebinCount: 0,
      noDataText: "暂无未读消息",
      mes: {
        title: "",
        time: "",
        content: "",
      },
      mesTitleColumns: [
        // {
        //     type: 'selection',
        //     width: 50,
        //     align: 'center'
        // },
        {
          title: " ",
          key: "title",
          align: "left",
          ellipsis: true,
          render: (h, params) => {
            return h(
              "a",
              {
                on: {
                  click: () => {
                    this.showMesTitleList = false;
                    this.mes.title = params.row.title;
                    this.mes.time = this.formatDate(params.row.time);
                    this.getContent(params.index);
                  },
                },
              },
              params.row.title
            );
          },
        },
        {
          title: " ",
          key: "time",
          align: "center",
          width: 180,
          render: (h, params) => {
            return h("span", [
              h("Icon", {
                props: {
                  type: "android-time",
                  size: 12,
                },
                style: {
                  margin: "0 5px",
                },
              }),
              h(
                "span",
                {
                  props: {
                    type: "android-time",
                    size: 12,
                  },
                },
                this.formatDate(params.row.time)
              ),
            ]);
          },
        },
        {
          title: " ",
          key: "asread",
          align: "center",
          width: 100,
          render: (h, params) => {
            if (this.currentMessageType === "unread") {
              return h("div", [markAsreadBtn(h, params)]);
            } else if (this.currentMessageType === "hasread") {
              return h("div", [deleteMesBtn(h, params)]);
            } else {
              return h("div", [restoreBtn(h, params)]);
            }
          },
        },
      ],
    };
  },
  methods: {
    formatDate(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      return (
        year +
        "/" +
        month +
        "/" +
        day +
        "  " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
    backMesTitleList() {
      this.showMesTitleList = true;
    },
    setCurrentMesType(type) {
      if (this.currentMessageType !== type) {
        this.showMesTitleList = true;
      }
      this.currentMessageType = type;
      if (type === "unread") {
        this.noDataText = "暂无未读消息";
        this.currentMesList = this.unreadMesList;
      } else if (type === "hasread") {
        this.noDataText = "暂无已读消息";
        this.currentMesList = this.hasreadMesList;
      } else {
        this.noDataText = "回收站无消息";
        this.currentMesList = this.recyclebinList;
      }
    },
    getContent(index) {
      // you can write ajax request here to get message content
      let mesContent = "";
      switch (this.currentMessageType + index) {
        case "unread0":
          mesContent =
            "这是您点击的《欢迎登录iView-admin孚创运维工具平台，来了解他的用途吧》的相关内容。";
          break;
        case "unread1":
          mesContent =
            "这是您点击的《使用iView-admin和iView-ui组件库快速搭建你的后台系统吧》的相关内容。";
          break;
        case "unread2":
          mesContent =
            "这是您点击的《喜欢iView-admin的话，欢迎到github主页给个star吧》的相关内容。";
          break;
        case "hasread0":
          mesContent = "这是您点击的《这是一条您已经读过的消息》的相关内容。";
          break;
        default:
          mesContent = "这是您点击的《这是一条被删除的消息》的相关内容。";
          break;
      }
      this.mes.content = mesContent;
    },
  },
  mounted() {
    this.currentMesList = this.unreadMesList = [
      {
        title: "欢迎登录iView-admin孚创运维工具平台，来了解他的用途吧",
        time: 1507390106000,
      },
      {
        title: "使用iView-admin和iView-ui组件库快速搭建你的后台系统吧",
        time: 1507390106000,
      },
      {
        title: "喜欢iView-admin的话，欢迎到github主页给个star吧",
        time: 1507390106000,
      },
    ];
    this.hasreadMesList = [
      {
        title: "这是一条您已经读过的消息",
        time: 1507330106000,
      },
    ];
    this.recyclebinList = [
      {
        title: "这是一条被删除的消息",
        time: 1506390106000,
      },
    ];
    this.unreadCount = this.unreadMesList.length;
    this.hasreadCount = this.hasreadMesList.length;
    this.recyclebinCount = this.recyclebinList.length;
  },
  watch: {
    unreadMesList(arr) {
      this.unreadCount = arr.length;
    },
    hasreadMesList(arr) {
      this.hasreadCount = arr.length;
    },
    recyclebinList(arr) {
      this.recyclebinCount = arr.length;
    },
  },
};
</script>

